<template>
  <BasicDrawer
    :destroyOnClose="true"
    v-bind="$attrs"
    @register="registerDrawer"
    :title="state.title"
    width="920px"
    :showFooter="false"
    :maskClosable="false"
  >
    <div class="card">
      <div class="c-title"> 基础信息 </div>

      <div class="c-body">
        <a-row :gutter="[8, 10]">
          <a-col span="3" class="f-label"> 单据编号 </a-col>
          <a-col span="9" class="f-value">
            {{ detail.moveCode }}
          </a-col>

          <a-col span="3" class="f-label">
            {{ state.moveType === 'S' ? '入库原因' : '出库原因' }}
          </a-col>
          <a-col span="9" class="f-value">
            {{ getLabel(moveTypeCodeList, detail.moveTypeCode) }}
          </a-col>

          <a-col span="3" class="f-label">
            {{ state.moveType === 'S' ? '入库时间' : '出库时间' }}
          </a-col>
          <a-col span="9" class="f-value">
            {{ detail.addTime }}
          </a-col>

          <a-col span="3" class="f-label"> 操作人 </a-col>
          <a-col span="9" class="f-value">
            {{ detail.employeesName }}
          </a-col>

          <a-col span="3" class="f-label"> 备注 </a-col>
          <a-col span="21" class="f-value">
            {{ detail.logNote || '-' }}
          </a-col>
        </a-row>
      </div>
    </div>

    <div class="card" style="margin-top: 24px">
      <div class="c-title"> 商品明细 </div>

      <div class="c-body">
        <BasicTable
          @register="registerTable"
          :resizeHeightOffset="44"
          :dataSource="detail.stockLogDetailList"
          style="margin: 0 -6px"
        />
      </div>
    </div>
  </BasicDrawer>
</template>

<script setup>
  import { defineOptions, h, reactive, ref } from 'vue';

  import { BasicTable, useTable } from '@/components/Table';

  import ProImgCell from '@/widget/pro-img-cell.vue';
  import { POST } from '@/api/http.js';
  import { BasicDrawer, useDrawerInner } from '@/components/Drawer';
  import { getLabel, moveTypeCodeList } from '@/api/ds.js';

  defineOptions({ name: 'StockOutInDetail' });

  const detail = ref({});
  const state = reactive({ title: null, moveType: null });

  const [registerDrawer] = useDrawerInner(async ({ moveType, moveCode }) => {
    state.title = moveType === 'S' ? '入库明细' : '出库明细';
    state.moveType = moveType;

    detail.value = (await POST('/product/getStockLogByParam', { moveType, moveCode })) ?? {};
  });

  const [registerTable] = useTable({
    pagination: false,
    columns: [
      {
        title: '商品名称',
        dataIndex: 'goodsName',
        ellipsis: false,
        width: 290,
        customRender: ({ value: title, record }) =>
          h(ProImgCell, { src: record.goodsImage, title }),
      },
      {
        title: '规格',
        dataIndex: 'specs',
        ellipsis: false,
      },

      {
        title: '实收货数量',
        dataIndex: 'stockQty',
        ellipsis: false,
        customRender: ({ value, record }) => `${value || '0'}${record.saleUnit || ''}`,
        ifShow: () => state.moveType === 'S',
      },

      {
        title: '出库数量',
        dataIndex: 'stockQty',
        ellipsis: false,
        customRender: ({ value, record }) => `${value || '0'}${record.saleUnit || ''}`,
        ifShow: () => state.moveType === 'D',
      },
    ],
    useSearchForm: false,
    showTableSetting: false,
    bordered: true,
    showIndexColumn: false,
    rowKey: 'id',
  });
</script>
<style lang="less" scoped>
  .card {
    padding: 12px;

    .c-title {
      color: #333;
      font-size: 14px;
      font-weight: 500;
    }

    .line {
      margin: 0 -12px;
      padding-bottom: 8px;
      border-bottom: 1px solid #f0f0f0;
    }

    .c-body {
      padding: 8px 12px;
    }
  }
</style>
